<template>
  <div class="product-add">
    <!--form表单-->
    <el-form ref="form" :model="form" label-width="150px">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="一般" name="first">
          <el-form-item label="ロゴ登録">
            <el-upload class="avatar-uploader" action="https://plusone-stock.com/api/uploads/uploadImg"
              :show-file-list="false" :on-success="handleSuccess">
              <el-icon  v-if="form.logo == ''" class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </el-upload>
            <div v-if="form.logo != ''" class="avatarDiv">
              <img :src="form.logo" class="avatar" />
              <div class="avatarDiv-icon">
                <el-icon size="30" class="delete-img-icon" @click="deleteImg(form, 1)">
                  <Delete />
                </el-icon>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="表示の設定" prop="shop_logo_img">
            <el-checkbox v-model="form.flag">ロゴを帳票に表示する</el-checkbox>
          </el-form-item>
          <el-form-item label="印鑑登録">
            <el-upload class="avatar-uploader" action="https://plusone-stock.com/api/uploads/uploadImg"
              :show-file-list="false" :on-success="handleSuccesss">
              <!-- <img v-if="form.print_img" :src="form.print_img" class="avatar" /> -->
              <el-icon v-if="form.print_img == ''" class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </el-upload>
            <div v-if="form.print_img != ''" class="avatarDiv">
              <img :src="form.print_img" class="avatar" />
              <div class="avatarDiv-icon">
                <el-icon size="30" class="delete-img-icon" @click="deleteImg(form, 2)">
                  <Delete />
                </el-icon>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="表示の設定" prop="shop_logo_img">
            <el-checkbox v-model="form.print">印影を帳票に表示する</el-checkbox>
          </el-form-item>
          <el-form-item label="単位欄" prop="shop_logo_img">
            <el-checkbox v-model="form.units">単位を使用する</el-checkbox>
          </el-form-item>
          <el-form-item label="消費税率">
            <el-radio-group v-model="form.rate">
              <el-radio :value="1">10%</el-radio>
              <el-radio :value="2">8%(軽減税率)</el-radio>
              <el-radio :value="3">8%</el-radio>
              <el-radio :value="4">5%</el-radio>
              <el-radio :value="5">免税</el-radio>
              <el-radio :value="6">非課税</el-radio>
              <el-radio :value="7">不課税</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="消費税の表示方式">
            <el-radio-group v-model="form.tax">
              <el-radio :value="1">外税</el-radio>
              <el-radio :value="2">内税</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="消費税が0円の場合" prop="tax0">
            <el-checkbox v-model="form.tax0">消費税欄を表示する</el-checkbox>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="テンプレート切り替え" name="second">
          <div class="container___1Ytwi">
            <div v-for="item in tmpImgList" :key="item.id" class="thumbnailContainer"
              :class="form.tmp_type == item.id ? 'active' : ''" @click="imgClick(item.id)">
              <img :src="item.img" :alt="item.img" class="thumbnail___1Xmc4" />
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <!--提交-->
      <div class="button-wrapper">
        <el-button type="primary" @click="onSubmit" :loading="loading">変更を保存</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import billsettingApi from "@/api/billsetting.js";
export default {
  data() {
    return {
      /*是否正在加载*/
      loading: false,
      /*form表单数据*/
      activeName: "first",
      form: {
        logo: "",
        print_img: "",
        flag: true,
        print: true,
        units: true,
        rate: 1,
        tax: 1,
        tax0: true,
        tmp_type: 1,
      },
      tmpImgList: [],
    };
  },
  created() {
    this.getDetails();
    this.getTmpImgList();
  },

  methods: {
    /*获取模版样式*/
    getTmpImgList() {
      let self = this;
      billsettingApi.tmps({}, true)
        .then((res) => {
          this.tmpImgList = res.data
          self.loading = false;
        })
        .catch((error) => {
          self.loading = false;
        });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    imgClick(index) {
      this.form.tmp_type = index;
    },
    /*获取配置数据*/
    getDetails() {
      let self = this;
      billsettingApi.details({}, true)
        .then((res) => {
          if (res.data.flag == 1) {
            res.data.flag = true
          } else {
            res.data.flag = false
          }
          if (res.data.print == 1) {
            res.data.print = true
          } else {
            res.data.print = false
          }
          if (res.data.units == 1) {
            res.data.units = true
          } else {
            res.data.units = false
          }
          if (res.data.tax0 == 1) {
            res.data.tax0 = true
          } else {
            res.data.tax0 = false
          }
          this.form = res.data
          self.loading = false;
        })
        .catch((error) => {
          self.loading = false;
        });
    },
    /*提交*/
    onSubmit() {
      let self = this;
      let params = this.form;
      self.$refs.form.validate((valid) => {
        if (valid) {
          self.loading = true;
          billsettingApi.edits(params, true)
            .then((data) => {
              self.loading = false;
              ElMessage({
                message: "完了しました",
                type: "success",
              });
            })
            .catch((error) => {
              self.loading = false;
            });
        }
      });
    },
    handleSuccess(response, file, fileList) {
      if (response.code == 1) {
        this.form.logo = response.data
      }
    },
    handleSuccesss(response, file, fileList) {
      if (response.code == 1) {
        this.form.print_img = response.data
      }
    },
    deleteImg(item, index) {
      if (index == 1) {
        this.form.logo = ""
      } else {
        this.form.print_img = ""
      }
      console.log(this.form)
    },
  },
};
</script>
<style>
.tips {
  color: #ccc;
  width: 100%;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type="number"] {
  -moz-appearance: textfield;
}

.button-wrapper {
  display: flex;
}

.avatarDiv {
  width: 178px;
  height: 178px;
  position: relative;
}

.avatarDiv .avatarDiv-icon {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999999;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  text-align: center;
  align-items: center;
}

.delete-img-icon {
  color: #ffffff;
  font-size: 28px;
  margin-top: 40%;
}

.avatarDiv:hover .avatarDiv-icon {
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.container___1Ytwi {
  display: flex;
  flex-wrap: wrap;
  margin-top: 15px;
}

.thumbnailContainer {
  position: relative;
  flex: 0 0 140px;
  border: solid 4px transparent;
  margin: 9px 4px;
  cursor: pointer;
}

.active {
  border-color: #4a90e2;
}

.thumbnail___1Xmc4 {
  width: 169px;
  height: 216px;
}
</style>
